<link rel="stylesheet" href="<?php echo base_url(); ?>css/jquery-ui-1.9.2.custom.css" />

<script type="text/javascript">
    $(function() {
        $("#times").mask('9?9');
    });
    
    var array = []
    $(document).ready(function() {
        $("#times").bind('keypress', function(e) {
            return (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) ? false : true;
        });

//        $('button[name=btnSearchCourse]').click(function() { // This event fires when a button is clicked
//            var username = $('#member').val();
//            $.ajax({// ajax call starts
//                url: 'AddTimes/SearchCourse', // JQuery loads serverside.php
//                data: 'user=' + username, // Send value of the clicked button
//                dataType: 'json', // Choosing a JSON datatype
//                success: function(data) // Variable data contains the data we get from serverside
//                {
//                    var course = $('#course');
//
//
//                    course.find('option').remove();
//                    course.append(
//                            $('<option></option>').val("").html("Select")
//                            );
//                    for (var i in data.name) {
////                        $('#wines').append('Name: ' + data.name[i] + '<br/>');
//                        course.append(
//                                $('<option></option>').val(data.id[i]).html(data.name[i])
//                                );
//                    }
//                }
//
//            });
//            return false; // keeps the page from not refreshing 
//        });

        var availableTags;
        $(function() {

            availableTags = [
<?php
$leagth = count($memberList);
$number = 0;
foreach ($memberList as $list) {
    echo "'" . $list . "'";
    if ($number < $leagth) {
        echo ",";
    }
}
?>
            ];
            $("#member").autocomplete({
                open: function() {
                    $(this).autocomplete('widget').css('font-size', 15);
                    return false;
                },
                source: availableTags
            });
        });

        function validate_input(attname, attinput, atterror) {
            if (!attname) {
                $(attinput).attr('class', "inp-form-error");
                $(atterror).attr('style', 'visibility:visible');
                array.push(false);
            } else {
                $(attinput).attr('class', "inp-form");
                $(atterror).attr('style', 'visibility:hidden');
                array.push(true);
            }
        }
        function validate_dropdown(attname, attinput, atterror) {
            if (attname <= 0) {
                $(attinput).attr('class', "inp-form-error");
                $(atterror).attr('style', 'visibility:visible');
                array.push(false);
            } else {
                $(attinput).attr('class', "inp-form");
                $(atterror).attr('style', 'visibility:hidden');
                array.push(true);
            }
        }
        function checkUsername(username) {

            var result = availableTags.indexOf(username);
            if (username == "") {
                $("#member").attr('class', "inp-form-error");
                $("#error_member").attr('style', 'visibility:visible');
                document.getElementById("error_field_username").innerHTML = ' This field is required.';
                array.push(false);
            } else if (result < 0) {
                $("#member").attr('class', "inp-form-error");
                $("#error_member").attr('style', 'visibility:visible');
                document.getElementById("error_field_username").innerHTML = ' Not Found this Username.';
                array.push(false);
            } else {
                $("#member").attr('class', "inp-form");
                $("#error_member").attr('style', 'visibility:hidden');
                document.getElementById("error_field_username").innerHTML = ' This field is required.';
                array.push(true);
            }
        }

        $("input[name='submit']").click(function() {

            var member = $("input[id='member']").val();
            var times = $("input[id='times']").val();
            array.length = 0;

            checkUsername(member);
            validate_input(times, "input[id='times']", "div[id='error_times']");
            for (var i in array) {
                if (!array[i]) {
                    return false;
                    break;
                }
            }
        });

        $("button[name='reset']").click(function() {
            $("#member").val("");
            $("#times").val("");
            $("#member").attr('class', "inp-form");
            $("#error_member").attr('style', 'visibility:hidden');
            $("#times").attr('class', "inp-form");
            $("#error_times").attr('style', 'visibility:hidden');
        });
    });
</script>

<div id="content-outer">
    <div id="content">
        <div id="page-heading"><h1>Add Video Times</h1></div>
        <table border="0" width="100%" cellpadding="0" cellspacing="0" id="content-table">
            <tbody>
                <tr>
                    <th rowspan="3" class="sized"><img src="<?php echo base_url(); ?>images/shared/side_shadowleft.jpg" width="20" height="300" alt=""></th>
                    <th class="topleft"></th>
                    <td id="tbl-border-top">&nbsp;</td>
                    <th class="topright"></th>
                    <th rowspan="3" class="sized"><img src="<?php echo base_url(); ?>images/shared/side_shadowright.jpg" width="20" height="300" alt=""></th>
                </tr>
                <tr>
                    <td id="tbl-border-left"></td>
                    <td>
                        <!--  start content-table-inner -->
                        <div id="content-table-inner">

                            <table border="0" width="100%" cellpadding="0" cellspacing="0">

                                <tbody><tr valign="top">
                                        <td>


                                            <!-- start id-form -->
                                            <table border="0" cellpadding="0" cellspacing="0" id="id-form">
                                                <?php
                                                echo form_open('AddTimes/Submit');
                                                ?>
                                                <tbody>
                                                    <tr>
                                                        <td>
                                                            &nbsp;
                                                        </td>
                                                    </tr>    
                                                    <tr>
                                                        <th valign="top" style="width:150px">Username:</th>
                                                        <td>
                                                            <? echo form_input('member', "", 'class="inp-form" id="member" autocomplete="off"'); ?> 
                                                            <? // echo form_button('btnSearchCourse', 'Search Course', 'id="btnSearchCourse" style="width: 150px;height: 30px;margin-right: 20px"'); ?> 
                                                        </td>
                                                        <td style="width:500px">
                                                            <div width="400px" id="error_member" style="visibility:hidden">
                                                                <div class="error-left"></div>
                                                                <div id="error_field_username" class="error-inner">This field is required.</div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            &nbsp;
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <th valign="top">Course:</th>
                                                        <td>
                                                            <?php echo form_dropdown('course', $courseList, '', 'class="styledselect-course" id="course"'); ?> 
                                                        </td>
                                                        <td style="width:500px">
                                                            <!--                                                            <div width="400px" id="error_times" style="visibility:hidden">
                                                                                                                            <div class="error-left"></div>
                                                                                                                            <div id="error_field_citizenid" class="error-inner">This field is required.</div>
                                                                                                                        </div>-->
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            &nbsp;
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <th valign="top">Video times:</th>
                                                        <td>
                                                            <?php echo form_input($times, '', 'class="inp-form" id="times"'); ?> 
                                                        </td>
                                                        <td style="width:500px">
                                                            <div width="400px" id="error_times" style="visibility:hidden">
                                                                <div class="error-left"></div>
                                                                <div id="error_field_citizenid" class="error-inner">This field is required.</div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            &nbsp;
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <th>&nbsp;</th>
                                                        <td valign="top">
                                                            <?php echo form_submit('submit', 'Submit', 'class="form-submit"'); ?>
                                                            <?php echo form_button('reset', 'Reset', 'class="form-reset"'); ?>
                                                        </td>
                                                        <td></td>
                                                    </tr>
                                                </tbody>
                                                <?php echo form_close(); ?>
                                            </table>
                                            <!-- end id-form  -->

                                        </td>
                                        <td>

                                        </td>
                                    </tr>
                                    <tr>
                                        <td><img src="images/shared/blank.gif" width="695" height="1"></td>
                                        <td></td>
                                    </tr>
                                </tbody></table>


                            <div class="clear"></div>


                        </div>
                        <!--  end content-table-inner  -->
                    </td>
                    <td id="tbl-border-right"></td>
                </tr>
                <tr>
                    <th class="sized bottomleft"></th>
                    <td id="tbl-border-bottom">&nbsp;</td>
                    <th class="sized bottomright"></th>
                </tr>
            </tbody></table>

        <div class="clear">&nbsp;</div>
    </div>
</div>